<template>
  <div class="body">
    <nut-navbar @on-click-back="$router.back()" :rightShow="false">团房申请</nut-navbar>
    <div class="container">
      <div class="list m-t-10">

        <div class="item w-100 m-b-10" @click="goRecord" v-if="this.activity == true">
          <div class="box dis-flex">
            <div class="icon icon1"></div>
            <div class="info">
              <div class="text-right l-h-25">团房申请</div>
              <div class="text-right l-h-25">Mission Housing Application</div>
            </div>
          </div>
        </div>

        <div class="item w-100 m-b-10" @click="gotheater" v-if="this.venue == true">
          <div class="box dis-flex">
            <div class="icon icon2"></div>
            <div class="info">
              <div class="text-right l-h-25">档期管理</div>
              <div class="text-right l-h-25">Slotting management</div>
            </div>
          </div>
        </div>

        <div class="item w-100 m-b-10" @click="goHotel">
          <div class="box dis-flex">
            <div class="icon icon3"></div>
            <div class="info">
              <div class="text-right l-h-25">酒店介绍</div>
              <div class="text-right l-h-25">Hotel introduction</div>
            </div>
          </div>
        </div>

        <div class="item w-100 m-b-10" @click="goSchedule">
          <div class="box dis-flex">
            <div class="icon icon4"></div>
            <div class="info">
              <div class="text-right l-h-25">会场详情</div>
              <div class="text-right l-h-25">Conference venue details</div>
            </div>
          </div>
        </div>
        <!--<div class="item w-100 m-b-10">-->
          <!--<div class="box dis-flex">-->
            <!--<div class="icon"></div>-->
            <!--<div class="info">-->
              <!--<div class="text-right l-h-25">团房申请</div>-->
              <!--<div class="text-right l-h-25">Mission Housing Application</div>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { wxInit } from '../../utils/weixin-init'

  export default {
    data () {
      return {
          venue:false,
          activity:false,
      }
    },
    computed: {
      ...mapGetters([ 'userInfo' ])
    },
    mounted () {
      this.updateMember()
      this.getPayModul()
      wxInit()
      console.info('userAgent', navigator.userAgent)
    },
    methods: {
      async updateMember () {
        console.info('this.userInfo.userId1111111', this.userInfo)
        await this.$store.dispatch('UpdateUserInfoAct', { id: this.userInfo.userId })
      },
      goRecord () {
        if (this.userInfo.salesman === 2 || this.userInfo.salesman === 9) {
          this.$router.push('/record')
        } else {
          this.$toast.text('请联系管理员获取权限')
        }
      },
      gotheater(){
        if (this.userInfo.salesman === 2 || this.userInfo.salesman === 9) {
          this.$router.push('/theater')
        } else {
          this.$toast.text('请联系管理员获取权限')
        }
      },
      goSchedule () {
        this.$router.push('/schedule')
      },
      goHotel(){
        this.$router.push('/hotelin')
      },
      getPayModul(){
          this.$http.get(this.$url + '/inf/common/getPayModul',{
          })
          .then(response => {
              if(response.data.list[0].state == "1A"){
                this.venue = true
              }
              if(response.data.list[1].state == "1A"){
                this.activity = true
              }
          })
      }
    }
  }
</script>

<style scoped lang="scss">
  .item {
    background: #1B1B1B;
    padding: 5px;
    box-sizing: border-box;
    .box {
      border: 1px #CBA15A solid;
      align-items: center;
      padding: 10px;
      box-sizing: border-box;
      .icon {
        width: 30px;
        height: 30px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .info {
        color: #CBA15A;
        flex-grow: 1;
        div + div {
          opacity: 0.1;
        }
      }
    }
  }
  .icon1{
    background-image: url("../../assets/icon/icon-index1.png");
  }
  .icon2{
    background-image: url("../../assets/icon/icon-index2.png");
  }
  .icon3{
    background-image: url("../../assets/icon/icon-index3.png");
  }
  .icon4{
    background-image: url("../../assets/icon/icon-index4.png");
  }  
</style>
